import './Logs.css'
import Card from '../UI/Card/Card'
import LogItem from './LogItem/LogItem'
import Logfilter from "./Logfilter/Logfilter"
import React, {useState} from "react";

const Logs = (props) => {
    //选择的年份
    const [selectYear,setselectYear] = useState(2024);
    //过滤出当前选择的年份
    let filterData = props.logsData.filter(item => item.date.getFullYear() === selectYear);
    //设置年份函数
    const changeHandler = (year) => {
        setselectYear(year)
    }
    //数据渲染成html标签
    let logsItemData = filterData.map((item) => 
        <LogItem 
            //闭包保留索引
            deleteLogById={() => props.deleteLogById(item.key)}
            {...item}
        />
    )

    //无日志提示
    if (logsItemData.length === 0){
        logsItemData = <p>无日志</p>;
    } 
    
    return <Card className="logs" >
        <Logfilter
            selectYear={selectYear} 
            onYearChange={changeHandler}
        />
        {logsItemData}
    </Card>
}

export default Logs;
